<!--   表单重置注意:
    1. ref="ruleFormRef"  不加:ref,  定义ruleFormRef: const ruleFormRef = ref<FormInstance>()
	2. el-form-item定义 prop   prop值与model对应 -->
<template>
	<div class="g-search-form" v-show="isSearchForm">
		<el-form :inline="true" :model="searchModel" ref="ruleFormRef">
			<el-row>
				<el-col :span="8" :offset="0" v-for="scol in searchColumns" :key="scol.prop">
					<el-form-item style="width: 95%" :label="scol.label" :prop="scol.search.key ? scol.search.key : scol.prop">
						<!-- 文本输入框 -->
						<el-input
							v-if="scol.search.el === 'input'"
							v-model.trim="searchModel[scol.search.key ? scol.search.key : scol.prop]"
							placeholder="请输入"
							clearable
						/>
						<!-- 下拉选择框 -->
						<el-select
							v-else-if="scol.search.el === 'select'"
							v-model.trim="searchModel[scol.search.key ? scol.search.key : scol.prop]"
							placeholder=""
							style="width: 100%"
							clearable
						>
							<el-option
								v-for="subcol in scol.search.option"
								:key="subcol.value"
								:label="subcol.key"
								:value="subcol.value"
							/>
						</el-select>
						<!-- 时间段选择框 -->
						<el-date-picker
							v-else-if="scol.search.el === 'datepicker'"
							v-model="searchModel[scol.search.key ? scol.search.key : scol.prop]"
							type="datetimerange"
							range-separator="至"
							start-placeholder="开始"
							end-placeholder="结束"
							size="default"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="8" :offset="0">
					<el-form-item>
						<el-button type="primary" :icon="Search" @click="$emit('onSearchSubmit', $event)">搜索</el-button>
						<el-button type="primary" :icon="Delete" @click="resetForm(ruleFormRef)">重置</el-button>
						<el-button type="primary" :icon="Refresh" @click="$emit('onRefresh', $event)">刷新</el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script setup lang="ts">
import { Search, Delete, Refresh } from '@element-plus/icons-vue'
import { FormInstance } from 'element-plus/es/components/form'
import { ref } from 'vue'

const ruleFormRef = ref<FormInstance>()
interface SearchFormProps {
	isSearchForm?: boolean
	searchModel?: any
	searchColumns?: any
}
// 接收参数,定义默认值
const props = withDefaults(defineProps<SearchFormProps>(), {
	isSearchForm: true,
	searchModel: {},
	searchColumns: () => []
})

defineEmits(['onSearchSubmit', 'resetForm', 'onRefresh'])

const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.resetFields()
	props.searchModel.startTime = ''
	props.searchModel.endTime = ''
}
</script>

<style scoped></style>
